<template>
  <div @click="handleBody">
    <div class="title">
      <span class="el-icon-close"></span>
      学渣乐园
    </div>
    <div class="des border-top">
      <div class="des-img">头像</div>
      <div class="des-title">
        <p>愤怒的小鸟</p>
        <p>逆袭豆：110颗</p>
      </div>
      <div class="des-btn">
        <button :disabled="disable" :class="{active: isActive,actived:isActived}" @click="signIn">{{sign}}</button>
      </div>
    </div>
    <div class="content">
      <div class="count">
        <div class="count-left">
          <p>已累计签到</p>
          <p class="total">15 天</p>
        </div>
        <div class="count-right">
          <p>最高连续签到</p>
          <p class="max">5 天</p>
        </div>
      </div>
      <div class="calendar">
        <full-calendar :events="fcEvents" locale="en"></full-calendar>
      </div>
      <div class="rules" @click="rules" style="z-index:10">签到规则</div>
      <sign-result v-if="show"></sign-result>
      <div ref="rulesDiv" v-if="appear">
        <sign-rules></sign-rules>
      </div>

    </div>
  </div>
</template>

<script>
  import SignResult from './components/SignResult'
  import SignRules from './components/SignRules'

  var demoEvents = [
    {
      title: '已签到',
      start: '2019-01-12',
      end: '2019-01-15',
      cssClass: "iconfont icon-qie"
    }
  ]
  export default {
    name: "Sign",
    components: {
      SignResult,
      SignRules,
      'full-calendar': require('vue-fullcalendar')
    },
    data() {
      return {
        sign: '签到',
        isActive: true,
        isActived: false,
        disable: false,
        show: false,
        appear: false,
        fcEvents: demoEvents,
      }
    },
    methods: {
      signIn: function () {
        this.sign = "已签到";
        this.isActive = false;
        this.isActived = true;
        this.disable = true;
        this.show = true;
        setTimeout(() => {
          this.show = false;
        }, 3000)
      },
      rules: function () {
        this.appear = true
      },
      handleBody: function (event) {
        var sp = this.$refs.rulesDiv;
        if (sp) {
          if (!sp.contains(event.target)) {
            this.appear = false;
          }
        }
      }
    }
  }
</script>

<style scoped>
  .title {
    width: 100%;
    line-height: 1rem;
    font-size: 16px;
  }

  .el-icon-close {
    width: .6rem;
    margin-left: .4rem;
    font-size: .4rem;
    font-weight: bold;
    text-align: center;
  }

  .des {
    width: 100%;
    display: flex;
    justify-content: space-between;
    border-top: 0.01rem solid #797979;
    border-bottom: 0.01rem solid #797979;
    background: #e4e4e4;
  }

  .des-img {
    width: 1.6rem;
    height: 1.6rem;
    line-height: 1.6rem;
    text-align: center;
    margin: .2rem .4rem;
    border-radius: 50%;
    border: 0.01rem solid #797979;
    background: #ffffff;
  }

  .des-title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-right: 6rem;
  }

  .des-title p {
    margin: .12rem 0;
    font-size: 16px;
  }

  .des-btn {
    width: 1.2rem;
    height: 1rem;
    margin: .4rem .4rem 0 0;
  }

  .active {
    width: 100%;
    padding: .2rem 0;
    font-size: 16px;
    border-radius: .08rem;
    border: 0.01rem solid #797979;
    background: #ffffff;
  }

  .actived {
    width: 100%;
    padding: .2rem 0;
    font-size: 16px;
    font-weight: bold;
    color: #ffffff;
    border-radius: .08rem;
    border: 0.01rem solid #797979;
    background: #949494;
  }

  .count {
    display: flex;
    justify-content: space-between;
    width: 80%;
    height: 1.14rem;
    margin: .6rem auto .2rem auto;
    border: 0.01rem solid #797979;
    border-radius: .08rem;
  }

  .count-left {
    padding: .2rem 0;
    margin-left: .4rem;
    font-size: 15px;
  }

  .total {
    margin: .15rem 0 0 .45rem;
  }

  .count-right {
    padding: .2rem 0;
    margin-right: .5rem;
    font-size: 15px;
  }

  .max {
    margin: .15rem 0 0 .5rem;
  }

  .rules {
    position: absolute;
    right: .6rem;
    bottom: -5.4rem;
    font-size: 16px;
    z-index: 5;
  }

  .calendar {
    width: 90%;
    margin: 0 auto;
  }

  .comp-full-calendar {
    margin-top: .6rem;
    background: #fcd32d;
  }

  /deep/ .full-calendar-body .weeks {
    height: .6rem;
    line-height: .6rem;
    border-color: #fcea6b;
    background: #fcea6b;
  }

  /deep/ .full-calendar-body .dates .week-row {
    border-color: #fcea6b;
  }

  /deep/ .full-calendar-body .dates .week-row .day-cell {
    min-height: 50px;
    background: #fffbea;
  }
</style>
